<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-input
          clearable
          @clear="search()"
          placeholder="请输入产品名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="search()"
          >查询</el-button
        >
        <el-button
          @click="showAdd()"
          icon="el-icon-circle-plus-outline"
          type="success"
          >添加产品</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="products" style="width: 100%">
      <el-table-column type="selection" />
      <el-table-column prop="name" label="产品名称"> </el-table-column>
      <el-table-column prop="productKey" label="产品key"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="showDetail(scope.row.id)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >详情</el-button
          >
          <el-button
            @click="deletePro(scope.row.id)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="productPages.current"
      :page-sizes="[5, 10, 15, 50]"
      :page-size="productPages.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="productPages.total"
    >
    </el-pagination>

    <!-- 产品详情 -->
    <el-dialog title="产品详情" :visible.sync="dialogTableVisible">
      <el-descriptions class="margin-top" title="产品详情" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            产品ID
          </template>
          {{ productDetail.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            产品名称
          </template>
          {{ productDetail.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            ProductKey
          </template>
          {{ productDetail.productKey }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            用户名
          </template>
          {{ productDetail.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            密码
          </template>
          {{ productDetail.password }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            创建时间
          </template> 
          {{ productDetail.createTime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 产品添加/修改 -->
    <el-dialog title="产品管理" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" :model="newProduct" ref="repoRef">
        <el-form-item label="产品名称">
          <el-input v-model="newProduct.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属区域">
          <br />
          <el-select v-model="selectedArea" placeholder="请选择">
            <el-option
              v-for="item in pnames"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            >
            </el-option> </el-select
          ><br />
          <el-select
            v-if="secondPnames != ''"
            v-model="selectedArea2"
            placeholder="请选择"
          >
            <el-option
              v-for="item in secondPnames"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            >
            </el-option> </el-select
          ><br />
          <el-select
            v-if="thirdPnames != ''"
            v-model="selectedArea3"
            placeholder="请选择"
          >
            <el-option
              v-for="item in thirdPnames"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.prevent="add()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  getDetails,
  insertProduct,
  deleteProduct,
} from "@/api/product/product";
import { getPnames, getByPnames, getCode } from "@/api/area/area";
import { decode } from "js-base64";
export default {
  data() {
    return {
      products: [],
      tid: "",
      productPages: {},
      productDetail: {},
      newProduct: {},
      dialogTableVisible: false,
      dialogFormVisible: false,
      rules: {
        name: [
          { required: true, message: "请输入产品名称", trigger: 
          "blur" },
          // { validator:validateTitle, trigger: 'blur'},
        ],
      },
      pnames: [],
      secondPnames: [],
      thirdPnames: [],
      selectedArea: "",
      selectedArea2: "",
      selectedArea3: "",
    };
  },
  methods: {
    search() {},
    showAdd() {
      this.dialogFormVisible = true;
    },
    add() {
      if (this.selectedArea3 != '') { 
        this.getCodeByName(this.selectedArea3);
        
      } else {
        this.getCodeByName(this.selectedArea2);
      }
      
      this.dialogFormVisible = false;
      this.getProductList();
    },
    deletePro(pid) {
      deleteProduct(pid).then((res) => {
        alert(res.msg);
        this.getProductList();
      });
    },
    showDetail(pid) {
      getDetails(pid).then((res) => {
        this.productDetail = res.data.data;
        this.dialogTableVisible = true;
      });
    },
    getProductList(pageNumber, pageSize) {
      getList(this.tid, pageNumber, pageSize).then((res) => {
        if (res.data != null) { 
          this.products = res.data.records;
        this.productPages = res.data;
        }
        this.newProduct.tenantId = this.tid;
        console.log(this.newProduct)
      });
    },
    getAllPnames() {
      getPnames().then((res) => {
        this.pnames = res.data;
      });
    },
    handleSizeChange(val) {
      this.productPages.size = val;
      this.getProductList(this.productPages.current, this.productPages.size);
    },
    handleCurrentChange(val) {
      this.productPages.current = val;
      this.getProductList(this.productPages.current, this.productPages.size);
    },
    selectByPname2(pname) {
      getByPnames(pname).then((res) => {
        this.secondPnames = res.data;
      });
    },
    selectByPname3(pname) {
      getByPnames(pname).then((res) => {
        this.thirdPnames = res.data;
      });
    },
    getCodeByName(name) { 
      getCode(name).then(res => { 
        this.newProduct.areaCode = res.data;
        insertProduct(this.newProduct).then(res => {
        alert(res.msg);
      })
      })
    }
  },
  created() {
    var token = localStorage.getItem("token");
    var payload = token.substring(
      token.indexOf(".") + 1,
      token.lastIndexOf(".")
    );
    var user = JSON.parse(JSON.parse(decode(payload)).user);
    this.tid = user.id;
    this.getProductList();
    this.getAllPnames();
  },
  watch: {
    selectedArea: function () {
      this.selectByPname2(this.selectedArea);
    },
    selectedArea2: function () {
      this.selectByPname3(this.selectedArea2);
    },
  },
};
</script>
